<template>
  <ContentField>
    <a-row justify="center">
      <a-col :span="12">
        <div class="center">
          <h1>登录</h1>
        </div>
      </a-col>
      <a-col :span="13">
        <img
          src="https://img.zcool.cn/community/0156b25b2a647fa8012034f73c0cec.jpeg@1280w_1l_2o_100sh.jpg"
          alt="icon"
        />
      </a-col>
      <a-col :span="12">
        <a-row justify="center">
          <a-col :span="24">
            <a-input v-model:value="user.username" placeholder="用户名">
              <template #prefix>
                <user-outlined type="user" />
              </template>
            </a-input>
          </a-col>
          <a-col :span="24"><br /></a-col>
          <a-col :span="24">
            <a-input-password
              v-model:value="user.password"
              placeholder="密码"
            />
          </a-col>
          <a-col :span="24"><br /></a-col>

          <a-col :span="24">
            <a-input v-model:value="user.code" placeholder="验证码" />
          </a-col>

          <a-col :span="24"><br /></a-col>

          <template v-if="codeInfo.flag_code === true">
            <a-col :span="12">
              <a-statistic-countdown
                title="验证码过期时间"
                :value="codeInfo.deadline"
                style="margin-right: 50px"
                @finish="onFinish"
              />
            </a-col>

            <a-col :span="12">
              <img :src="'data:image/png;base64,' + codeInfo.code" alt="code" />
            </a-col>
          </template>

          <template v-else>
            <a-col :span="6">
              <a-button type="primary" ghost block @click="getcode()"
                >获取验证码</a-button
              >
            </a-col>
          </template>

          <a-col :span="24"><br /></a-col>

          <a-col :span="24">
            <a-button type="primary" @click="login()" block>登录</a-button>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </ContentField>
</template>
<script>
import { useStore } from "vuex";
import router from "@/router/index";
import userApi from "@/apis/userApi";
import { UserOutlined } from "@ant-design/icons-vue";
import ContentField from "@/components/ContentField";
import { reactive } from "@vue/reactivity";
import { message } from "ant-design-vue";
import jwt_decode from "jwt-decode";
export default {
  name: "LoginView",
  components: {
    UserOutlined,
    ContentField,
  },
  setup() {
    const store = useStore();

    let user = reactive({
      username: "",
      password: "",
      code: "",
    });

    let codeInfo = reactive({
      code: "",
      deadline: "",
      flag_code: false,
    });

    const getcode = () => {
      if (!user.username) {
        message.warn("请输入用户名后重试！");
        return false;
      }
      userApi.getCode(user.username).then((res) => {
        codeInfo.code = res.data.code_str;
        codeInfo.deadline = Date.now() + 1000 * res.data.code_ttl;
        codeInfo.flag_code = true;
      });
    };

    const login = () => {
      userApi.login(user).then((resp) => {
        let access = resp.data.access_token;
        let refresh =resp.data.refresh_token;
        store.state.user.info.access = access;
        store.state.user.info.refresh = refresh;

        localStorage.setItem("access",access);
        localStorage.setItem("refresh",refresh);

        let i = jwt_decode(access);

        userApi.getUserInfo(i.sub, access).then((resp) => {
          store.commit("updateUser",resp.data.userinfo);
          const userINFO = resp.data.userinfo;
          userINFO.iphone = null;
          userINFO.email = null;
          userINFO.avatar = userINFO.photo;
          localStorage.setItem("userinfo",JSON.stringify(userINFO));
          user = {};
          router.push("/");
        });
      });
    };

    const onFinish = () => {
      codeInfo.flag_code = false;
    };

    return {
      login,
      getcode,
      onFinish,
      user,
      codeInfo,
    };
  },
};
</script>

<style scoped>
img {
  width: 100%;
}
div.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>